<template>
  <div>
    <div class="app-container clearfix pageHeader">
      <div class="header fl">{{$route.meta.title}}</div>
    </div>
    <div class="app-container margin-content padding-content">
      <el-tabs @tab-click="handleTabClick" v-model="activeName">
        <el-tab-pane label="预警因子设置" name="one">
          <el-form ref="form1" label-width="180px">
            <el-form-item label="所属码头" prop="portId1" v-if="isAdmin">
              <port-tree-select :handle-selected="handleSelected" :keyValue="'form1'"></port-tree-select>
            </el-form-item>
            <el-form-item label="长期堆存集装箱预警(天)" prop="heavyStorageDays">
              <el-input placeholder="请输入天数" style="width:200px;" type="number" v-model="form1.heavyStorageDays">
                <template slot="prepend">重柜</template>
              </el-input>
            </el-form-item>
            <el-form-item prop="emptyStorageDays">
              <el-input placeholder="请输入天数" style="width:200px;" type="number" v-model="form1.emptyStorageDays">
                <template slot="prepend">吉柜</template>
              </el-input>
            </el-form-item>
            <el-form-item label="超时未申报货物预警(天)" prop="overDeclareDays">
              <el-input type="number" style="width:200px;" placeholder="请输入天数"
                        v-model="form1.overDeclareDays"></el-input>
            </el-form-item>
            <el-form-item label="超时未提离货物预警(天)" prop="overTakeoutDays">
              <el-input type="number" style="width:200px;" placeholder="请输入天数"
                        v-model="form1.overTakeoutDays"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="form1Submit">保存</el-button>
              <!--<el-button>取消</el-button>-->
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="值班人员设置" style="min-height:400px" name="two">
          <div>
            <div class="clearfix">
              <div class="btn-wrapper fl">
                <el-button icon="el-icon-edit" type="primary" @click="handleNewDuty">新建值班人员</el-button>
                <el-button icon="el-icon-delete" type="danger" @click="delUsers">删除</el-button>
              </div>
              <div class="fr">
                <el-form ref="form2" label-width="150px" prop="proId2">
                  <port-tree-select :handle-selected="handleSelected2" :keyValue="'form2'"
                                    v-if="isAdmin"></port-tree-select>
                </el-form>
              </div>
              <el-table :key="tableKey" :data="tableData" v-loading="loading"
                        @selection-change="handleSelectionChange" :max-height="scrollHeight"
                        element-loading-text="正在加载..." style="width: 100%;">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column label="姓名" fixed="left">
                  <template slot-scope="scope">{{scope.row.name}}</template>
                </el-table-column>
                <el-table-column label="单位">
                  <template slot-scope="scope">{{scope.row.portName}}</template>
                </el-table-column>
                <el-table-column label="科室">
                  <template slot-scope="scope">{{scope.row.depart}}</template>
                </el-table-column>
                <el-table-column label="手机号码">
                  <template slot-scope="scope">{{scope.row.tel}}</template>
                </el-table-column>
                <el-table-column label="值班日">
                  <template slot-scope="scope">
                    <span v-for="item in scope.row.dutyDay.split(',')"><el-tag
                      style="margin-right:5px;">{{txtMapDay[parseInt(item) - 1]}}</el-tag></span>
                  </template>
                </el-table-column>
                <el-table-column label="接收短信类型">
                  <template slot-scope="scope">
                    <span v-for="item in scope.row.dutyType.split(',')"><el-tag
                      style="margin-right:5px;">{{txtMapType[parseInt(item) - 1]}}</el-tag></span>
                  </template>
                </el-table-column>
                <!--<el-table-column label="创建时间">-->
                <!--<template slot-scope="scope">{{scope.row.createdtimeDesc}}</template>-->
                <!--</el-table-column>-->
                <el-table-column label="操作"  fixed="right">
                  <template slot-scope="scope">
                    <a href="javascript:void(0)" @click="handleEdit(scope.row)">修改</a>
                    <divider type="vertical"></divider>
                    <a href="javascript:void(0)" @click="delUsers(scope.row.id)">删除</a>
                  </template>
                </el-table-column>
              </el-table>
              <div class="pagination-container align-right" v-show="tableData.length > 0">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               :current-page="form2.page.pageNum" :page-sizes="form2.pageSizes"
                               :page-size="form2.page.pageSize"
                               layout="total,sizes, prev, pager, next, jumper" :total="form2.total">
                </el-pagination>
              </div>
              <duty-dialog ref="dutyDialogRef" :callBack="dutyDialogCallback"></duty-dialog>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="预警短信时段设置" name="three">
          <el-form ref="form3" label-width="150px">
            <el-form-item label="所属码头" prop="portId3" v-if="isAdmin">
              <port-tree-select :handle-selected="handleSelected3" :keyValue="'form3'"></port-tree-select>
            </el-form-item>
            <el-form-item label="上午">
              <el-time-select v-model="form3.amBegintime" value-format="yyyy-MM-dd HH:mm:ss"
                              :picker-options="{start: '06:00',step: '00:15',end: '12:00'}" placeholder="任意时间点">
              </el-time-select>
              -
              <el-time-select arrow-control v-model="form3.amEndtime" value-format="yyyy-MM-dd HH:mm:ss"
                              :picker-options="{start: '06:00',step: '00:15',end: '12:00'}" placeholder="任意时间点">
              </el-time-select>
            </el-form-item>
            <el-form-item label="下午 ">
              <el-time-select
                v-model="form3.pmBegintime"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="{start: '12:00',step: '00:15',end: '24:00'}"
                placeholder="任意时间点">
              </el-time-select>
              -
              <el-time-select
                arrow-control
                v-model="form3.pmEndtime"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="{start: '12:00',step: '00:15',end: '24:00'}"
                placeholder="任意时间点">
              </el-time-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveMessageTime">保存</el-button>
              <!--<el-button>取消</el-button>-->
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  import { page } from '@/utils/page'
  import {
    addSettings,
    getSettings,
    updateSettings,
    addEmp,
    getEmpList,
    delEmp,
    addMessage,
    updateMessage,
    getMessageDetail
  } from '@/api/warningSettings'
  import DutyDialog from './components/newDutyDialog'
  import PortTreeSelect from '@/components/PortTreeSelect'
  import Divider from '@/components/Divider'

  export default {
    name: 'warningSetting',
    components: {
      DutyDialog, PortTreeSelect, Divider
    },
    data() {
      return {
        tableKey: 0,
        tableData: [],
        loading: false,
        tableSelection: [],
        isAdmin: this.$store.getters.isAdmin,
        activeName: 'one',
        scrollHeight: null,
        form1: {
          portId: null,
          heavyStorageDays: null,
          emptyStorageDays: null,
          overDeclareDays: null,
          overTakeoutDays: null,
          id: null
        },
        form2: {
          search: 0,
          options: [{label: '全部', id: 0}],
          pageSizes: page.pageSizes,
          total: 0,
          page: {
            portId: null,
            pageSize: page.pageSize,
            pageNum: 1,
          }
        },
        form3: {
          portId: null,
          amBegintime: null,
          amEndtime: null,
          pmBegintime: null,
          pmEndtime: null
        },
        txtMapDay: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        txtMapType: ['异常集装箱号', '重复再港集装箱', '重出重进集装箱', '异常途中监管集装箱']
      }
    },
    created(){
      if (!this.isAdmin) {
        this.getSettins()
      }
      this.tableResize()
    },
    methods: {
      handleNewDuty(){
        this.$refs.dutyDialogRef.handleCreate()
      },
      handleEdit(obj){
        this.$refs.dutyDialogRef.handleEdit(obj)
      },
      form1Submit(){
        updateSettings(this.form1).then(res => {
          this.$message({showClose: true, message: '保存成功', type: 'success'});
        })
      },
      handleSelected(node){
        this.form1 = {
          heavyStorageDays: null,
          emptyStorageDays: null,
          overDeclareDays: null,
          overTakeoutDays: null,
          portId: node.id
        }
        console.log(node)
        this.getSettins(node.id)
      },
      getSettins(id){
        getSettings({portId: id}).then(res => {
          res = res.data
          if (res.data !== null) {
            this.form1 = {
              heavyStorageDays: res.data.heavyStorageDays,
              emptyStorageDays: res.data.emptyStorageDays,
              overDeclareDays: res.data.overDeclareDays,
              overTakeoutDays: res.data.overTakeoutDays,
              portId: res.data.portId
            }
            this.form1.id = res.data.id
          }
        })
      },
      /**
       * 以下是值班人员设置的方法
       */
      getEmpList(){
        getEmpList(this.form2.page).then(res => {
          res = res.data
          this.form2.total = res.data.total
          this.tableData = res.data.dataList
        })
      },
      handleTabClick(obj){
        //点击Tab的callback
        switch (obj.index) {
          case '0':
            break;
          case '1':
            this.getEmpList() // 获取值班人员列表
            break;
          case '2':
            this.form3.portId = null
            this.getMessageDetail(this.form3)//获取预警短信时段设置
            break;
        }
      },
      handleSelectionChange(val) {
        this.tableSelection = val
      },
      handleSelected2(node){
        this.form2.page.portId = node.id
        this.getEmpList()
      },
      dutyDialogCallback(res){
        this.getEmpList()
      },
      delUsers(id) {
        let ids = []
        if (typeof(id) === 'object') {
          this.tableSelection.forEach(item => {
            ids.push(item.id)
          })
          ids = ids.join(',')
        } else {
          ids = id
        }
        if (ids === '') {
          this.$message({showClose: true, message: '请先选择一条', type: 'warning'});
          return false
        }
        this.$confirm('此操作将永久删除选择的用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delEmp({ids: ids}).then(res => {
            res = res.data
            if (res.code === 200) {
              this.getEmpList()
              this.$message({showClose: true, message: '删除成功', type: 'success'});
            } else {
              this.$message({showClose: true, message: res.message, type: 'error'});
            }
          })
        }).catch(() => {
          this.$message({type: 'info', message: '已取消删除'});
        })
      },
      /**
       * 以下是预警短信时段设置的方法
       */
      handleSelected3(node){
        this.form3 = {
          portId: null,
          amBegintime: null,
          amEndtime: null,
          pmBegintime: null,
          pmEndtime: null
        }
        this.form3.portId = node.id
        this.getMessageDetail(this.form3)
      },
      saveMessageTime(){
        updateMessage(this.form3).then(res => {
          this.$message({showClose: true, message: '保存成功', type: 'success'});
        })
      },
      getMessageDetail(form){
        getMessageDetail({
          portId: form.portId
        }).then(res => {
          res = res.data
          const {portId, amBegintime, amEndtime, pmBegintime, pmEndtime, id} = res.data
          this.form3 = {
            portId, amBegintime, amEndtime, pmBegintime, pmEndtime, id
          }
        })
      },
      /**
       * 分页
       */
      handleSizeChange(val){
        this.form2.page.pageSize = val
        this.getEmpList(this.form2.page)
      },
      handleCurrentChange(val){
        this.form2.page.pageNum = val
        this.getEmpList(this.form2.page)
      },
      tableResize(){
        const _height = 390
        this.scrollHeight = document.body.scrollHeight - _height
        window.onresize = () => {
          this.scrollHeight = document.body.scrollHeight - _height
        }
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped="scope">

</style>
